<template>
	<view class="page">
		<!-- 用户信息区域显示开始 -->
		<view class="userinfo-box">
			<view class="portrait-box">
				<image class="icon" src="/static/image/user.png" mode=""></image>
			</view>
			<view class="info-text-box" v-if="userinfo.username">
				<view class="nickname">
					<view class="name">
						{{userinfo.username}}
					</view>
					<view class="power">
						系统管理员
					</view>
				</view>
				<view class="company">
					{{employeeInfo && employeeInfo.tenantName ? employeeInfo.tenantName : '暂无企业信息'}}
				</view>
			</view>
			<view class="info-text-box" style="display: flex;align-items: center;" v-if="!userinfo.username">
				<view class="login-button" @click="login">
					一键授权登录
				</view>
			</view>

			<view class="qrcode-box" v-if="userinfo.username">
				<image class="icon" src="/static/image/user/qrcode.png" mode="aspectFit" @click="qrcodeChange"></image>
			</view>
		</view>
		<!-- 用户信息显示区域结束 -->
		<view class="cell-box">
			<cell :key="index" v-if="index < 5" v-for="(item,index) in cellList" :icon="item.icon" :name="item.url"
				:title="item.title" border-bottom @jump="jump"></cell>
		</view>
		<view class="cell-box">
			<cell :key="index" v-if="4 < index && index < 7" v-for="(item,index) in cellList" :icon="item.icon"
				:name="item.url" :title="item.title" border-bottom @jump="jump"></cell>
		</view>
		<view class="cell-box">
			<cell :key="index" v-if="index == 7" v-for="(item,index) in cellList" :icon="item.icon" :name="item.url"
				:title="item.title" border-bottom @jump="jump"></cell>
		</view>
		<view class="cell-box">
			<cell :key="index" v-if="index > 7" v-for="(item,index) in cellList" :icon="item.icon" :name="item.url"
				:title="item.title" border-bottom @jump="jump"></cell>
		</view>

		<disalog v-if="disalogQrcodeType == true"></disalog>
		<bindmobile v-if="bindFlag" @close="closeBind"></bindmobile>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import disalog from '../component/disalog/disalog.vue'
	import cell from '../component/cell/cell.vue';
	import bindmobile from '@/components/bindmobile/index';
	export default {
		components: {
			cell,
			bindmobile,
			disalog
		},
		data() {
			return {
				employeeInfo:null, // 用户当前企业信息
				bindFlag: false,
				userinfo: getApp().globalData.userInfo,
				disalogQrcodeType: false, // 人员二维码悬浮窗状态
				cellList: [
					// {
					// 	icon: '/static/image/user/company_icon.png',
					// 	title: '切换企业'
					// },
					{
						icon: '/static/image/user/job_icon.png',
						title: '职位',
						// url:'/pages/user/roles/roles'
					},
					{
						icon: '/static/image/user/email_icon.png',
						title: '邮箱'
					},
					{
						icon: '/static/image/user/book_icon.png',
						title: '企业信息'
					},
					{
						icon: '/static/image/user/position_icon.png',
						title: '地址信息',
						// url:'/pages/user/address/index'
					},
					{
						icon: '/static/image/user/people_icon.png',
						title: '邀请好友'
					},
					{
						icon: '/static/image/user/idcard_icon.png',
						title: '个人中心',
						url: '/pages/user/info/info'
					},
					{
						icon: '/static/image/user/qrcode_icon.png',
						title: '喷码打印'
					},
					{
						icon: '/static/image/user/printer_icon.png',
						title: '打印设置'
					},
					{
						icon: '/static/image/user/about_icon.png',
						title: '关于我们',
						url: '/pages/user/about/about'
					},
				],
			}
		},
		onShow() {
			let userInfo = getApp().globalData.userInfo;
			if(userInfo.id){
				this.userinfo = userInfo;
				userInfo.employee.forEach(res=>{
					if(res.isDefault == "0"){
						console.log(222);
						this.employeeInfo = res;
					}
				})
				console.log(this.employeeInfo);
			}
		},
		methods: {
			/***  关闭绑定手机弹框 */
			closeBind(){
				this.bindFlag = false
			},
			/** 授权登录  */
			login() {
				let _this = this

				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						// console.log('获取服务商', res)
						if (~res.provider.indexOf('weixin')) {
							console.log(111);
							wx.qy.login({
								success: function(res) {
									api.getUserInfo({
										code: res.code
									}).then(result => {
										console.log('wxuser', result);
										if (result.code == 0) {
											uni.setStorageSync('token', result.data.result.token)
											api.user({}).then(res => {
												console.log('user', res.data);
												res.data.employee.forEach(results=>{
													if(results.isDefault == "0"){
														console.log(222);
														_this.employeeInfo = results;
													}
												})
												// this.userinfo =
												getApp().globalData.userInfo = res.data;
												_this.userinfo = res.data
											});
										}
									}).catch(err => {
										uni.setStorageSync('wxUser', err.data.result);
										_this.bindFlag = true;
									})
									console.log('企业微信', res);
								},
								fail: function(err) {
									console.log(err);
								}
							});

						}
					}
				});

			},
			/**
			 * 人员二维码弹窗改变触发事件
			 */
			qrcodeChange: function() {
				// let disalogQrcodeType = this.disalogQrcodeType;
				// this.disalogQrcodeType = !disalogQrcodeType;
			},
			jump: function(e) {
				if (e != '' && e != null) {
					uni.navigateTo({
						url: e
					});
				} else {
					uni.showToast({
						title: '该功能暂未开放',
						icon: 'none',
						duration: 2000
					});
				}
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f6f6f6;
		min-height: 100vh;

		.userinfo-box {
			background-color: white;
			width: calc(100% - 40rpx);
			margin: 0 auto;
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			position: relative;

			.portrait-box {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				background-color: #cccccc;
				align-items: center;
				justify-content: center;
				border-radius: 100%;

				.icon {
					width: 100%;
					height: 100%;
				}
			}

			.info-text-box {
				margin-left: 30rpx;
				font-size: 30rpx;

				.nickname {
					display: flex;

					.power {
						margin-left: 20rpx;
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #1c638f;
					}
				}
			}

			.qrcode-box {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				width: 40rpx;
				height: 40rpx;

				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}

		.cell-box {
			margin-top: 30rpx;
		}
	}

	.login-button {
		background-color: #4269e2;
		color: white;
		border-radius: 50rpx;
		width: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 66rpx;
		font-size: 28rpx;
	}
</style>
